<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>浮动练习-解决空隙方法(Floating Exercise - Solving Gap Methods)</title>
  <!-- 
    在CSS中，可以使用以下方法来去除多个行内级元素之间的空格（间隙）： 
 
      1. 使用font-size: 0;：将行内级元素的父元素的font-size属性设置为0，可以去除元素之间的空格。
         但需要注意，子元素的字体大小需要重新设置为适当的值。
         .parent-element {
              font-size: 0;
          }
          .child-element {
              font-size: 16px; /* 重新设置子元素的字体大小 */
          }

      2. 使用margin负值：通过设置元素的margin属性为负值，可以减少元素之间的空格。
         .child-element {
              margin-right: -0.5px; /* 减少右侧元素之间的空格 */
              margin-left: -0.5px; /* 减少左侧元素之间的空格 */
          }

      3. 使用flex布局：通过使用flex布局，可以减少元素之间的空格。
          .parent-element {
              display: flex;
          }
      
      4. 使用grid布局：通过使用grid布局，可以减少元素之间的空格。
          .parent-element {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
          }
          .child-element {
            grid-column: span 1;
          }

      5. 删除换行符(不推荐)

      6. 设置统一向一个方向浮动(float)
   -->
   <style>
     .container span{
       float: left;
     }
   </style>
</head>
<body>
  
  <div class="container">
    <span>child01</span>
    <span>child02</span>
    <span>child03</span>
  </div>

</body>
</html>